<template>
	<view>
		<nav-bar color="#000000" bgc="#F4F4FA" bbtn>上传物流</nav-bar>
		<view class="post-address">
			<view class="title">寄回地址</view>
			<view class="item">
				<view>联系人：</view><view>萌萌</view>
			</view>
			<view class="item">
				<view>联系电话：</view><view>12345678900</view>
			</view>
			<view class="item">
				<view>邮寄地址： </view><view>浙江省杭州市西湖区文三路 138 号</view>
			</view>
		</view>
		<view class="info">
			<view class="info-title">上传物流单号</view>
			<view class="item">
				<view class="title-box">
					<view class="company-title">承运公司</view><view class="company-value">
					<picker @change="PickerChange" :value="index" :range="picker">
					          <view class="picker">
					            {{company?company:'请选择物流公司'}}
					          </view>
					        </picker>
					</view>
				</view>
				
				<picker @change="PickerChange" :value="index" :range="picker">
				          <view class="img">
				          	<image src="../../static/image/follow/lALPGoU8blkV3q8bGw_27_27.png" mode=""></image>
				          </view>
				        </picker>
				
			</view>
			<view class="item1">
				<view class="no-title">运单号</view><view class=""><input type="number" maxlength="20" value="" v-model="no" class="no" /></view>
			</view>
		</view>
		<view class="btn" @click="submit">提交申请</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				no: '',
				company: '',
				id: 0,
				picker: ['顺丰', '圆通', '申通', '韵达'],
				index: 0
			};
		},
		methods:{
			PickerChange(e){
				this.company = this.picker[e.detail.value]
			},
			submit(){
				if (!this.company) {
					uni.showToast({
						title: '请选择物流',
						icon: 'none',
						duration: 2000
					});
					return false;
				}
				if (!this.no) {
					uni.showToast({
						title: '请填写运单号',
						icon: 'none',
						duration: 2000
					});
					return false;
				}
				this.ajaxJson('submitServicePost', {id: this.id, company: this.company, post_no: this.no}, res => {
					uni.showToast({
						title:'提交成功',
						duration:2000,
						success() {
							setTimeout(()=>{
								uni.navigateBack({})
							}, 2000)
						}
					})
				});
			}
		},
		onLoad(options) {
			this.id = options.id
		}
	}
</script>

<style lang="scss">
	@import '../../colorui/main.css'; 
page {
		background: #F4F4FA;
}
.post-address{
	width:690rpx;
	height:331rpx;
	background:rgba(255,255,255,1);
	box-shadow:0px 1px 10px 0px rgba(29,30,33,0.1);
	border-radius:20rpx;
	margin: 128rpx auto 31rpx;
	box-sizing: border-box;
	padding-left: 31rpx;
	overflow: hidden;
	.title{
		font-size:32rpx;
		font-family:PingFang SC;
		font-weight:bold;
		color:rgba(29,30,33,1);
		line-height:1;
		margin: 40rpx 0 49rpx;
	}
	.item{
		display: flex;
		margin-bottom: 49rpx;
		view{
			
			font-size:26rpx;
			font-family:PingFang SC;
			font-weight:500;
			color:rgba(29,30,33,1);
			line-height:1;
		}
	}
	.item>view:first-child{
		margin-right: 75rpx;
	}
}
.info{
	width:690rpx;
	height:262rpx;
	background:rgba(255,255,255,1);
	box-shadow:0px 1px 10rpx 0px rgba(29,30,33,0.1);
	border-radius:20rpx;
	box-sizing: border-box;
	padding: 40rpx 30rpx 0 31rpx;
	margin: 0 auto;
	.info-title{
		font-size:32rpx;
		font-family:PingFang SC;
		font-weight:bold;
		color:rgba(29,30,33,1);
		line-height:1;
		margin-bottom: 50rpx;
	}
	.img{
		width:12rpx;
		height:20rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size:26rpx;
		color:rgba(29,30,33,1);
		line-height:1;
		margin-bottom: 50rpx;
		.title-box{
			display: flex;
			.company-title{
				margin-right: 61rpx;
			}
		}
	}
	.item1{
		display: flex;
		align-items: center;
		font-size:26rpx;
		color:rgba(29,30,33,1);
		line-height:1;
		.no{
			font-size:26rpx;
			color:rgba(29,30,33,1);
			line-height:1;
		}
		view{
			margin-right: 61rpx;
		}
	}
}
.btn{
	width:600rpx;
	height:88rpx;
	background:linear-gradient(90deg,rgba(253,100,49,1),rgba(255,153,114,1));
	box-shadow:0px 1px 20rpx 0px rgba(185,51,6,0.3);
	border-radius:44rpx;
	text-align: center;
	line-height: 88rpx;
	margin: 60rpx auto 0;
	font-size:36rpx;
	font-family:PingFang SC;
	font-weight:bold;
	color:rgba(255,255,255,1);
}
</style>
